<template>
  <div class="resource-status-management">
    <a-card title="状态管理" :bordered="false">
      <template #extra>
        <GuideWrapper
          guide-type="status-management"
          title="状态管理使用指南"
          button-text="使用指南"
        />
      </template>
      <!-- 状态概览面板 -->
      <StatusOverviewPanel
        :resource-id="resourceId"
        :resource-type="resourceType"
        @status-change="handleStatusChange"
      />

      <!-- 状态管理标签页 -->
      <a-tabs
        :activeKey="activeTab"
        @update:activeKey="activeTab = $event"
        class="status-tabs"
      >
        <!-- 状态配置 -->
        <a-tab-pane key="config" tab="状态配置">
          <StatusConfigurationPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @config-updated="handleConfigUpdated"
          />
        </a-tab-pane>

        <!-- 状态历史 -->
        <a-tab-pane key="history" tab="状态历史">
          <StatusHistoryPanel
            :resource-id="resourceId"
            :status-types="['LIFECYCLE', 'AVAILABILITY', 'VERSION', 'CUSTOM']"
          />
        </a-tab-pane>

        <!-- 状态订阅 -->
        <a-tab-pane key="subscription" tab="状态订阅">
          <StatusSubscriptionPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
          />
        </a-tab-pane>

        <!-- 状态机 -->
        <a-tab-pane key="state-machine" tab="状态机">
          <StateMachinePanel
            :resource-type="resourceType"
            @state-machine-updated="handleStateMachineUpdated"
          />
        </a-tab-pane>

        <!-- 状态事件 -->
        <a-tab-pane key="events" tab="状态事件">
          <StatusEventPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
          />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import StatusOverviewPanel from './status/StatusOverviewPanel.vue';
import StatusConfigurationPanel from './status/StatusConfigurationPanel.vue';
import StatusHistoryPanel from './status/StatusHistoryPanel.vue';
import StatusSubscriptionPanel from './status/StatusSubscriptionPanel.vue';
import StateMachinePanel from './status/StateMachinePanel.vue';
import StatusEventPanel from './status/StatusEventPanel.vue';
import GuideWrapper from '../guides/GuideWrapper.vue';

// Props
interface Props {
  resourceId: string;
  resourceType: string;
}

const props = defineProps<Props>();

// 响应式数据
const activeTab = ref('config');

// 事件处理
const handleStatusChange = (changeInfo: any) => {
  message.success(`${changeInfo.type}状态已更新为：${changeInfo.newStatus}`);
};

const handleConfigUpdated = () => {
  message.success('状态配置已更新');
};

const handleStateMachineUpdated = () => {
  message.success('状态机配置已更新');
};
</script>

<style lang="less" scoped>
.resource-status-management {
  .status-tabs {
    margin-top: 16px;
  }
}
</style>
